<template>
	<view>
		<view class="box">
			
			<view v-for="(item,index) in test_list" class="middle" :key="index" @click="nav_to(index)">
				<view style="display: flex;align-items: center;">
					<image src="../../static/subject.jpg" style="width: 88rpx; height: 88rpx;" class="subject_picture"></image>
					<view class="info">
						<view class="subject_lst">{{item.title}}</view>
						<view class="time">{{item.exam_time}}</view>
					</view>
				</view>
				<image src="../../static/arrow.png" mode="widthFix"></image>
			</view>
			
			<view class="bottom">
				<view class="bottom_content" @click="create_test()">创建考试</view>
			</view>
		</view>
		
		
		<open-alert ref="show_create_test" :AlertPosition="'bottom'" :closeBtn="'true'">
			<view class="openexam">
				<view class="examtile">
					<text class="textone">-</text>
					<text class="texttwo" @click.self="is_show = true">创建{{course_teacher_info.course_name}}考试</text>
					<text class="textone">-</text>
				</view>
				<input type="text" placeholder="请输入考试标题" v-model="test_title" class="inputtext" />
				<view class="datepick">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view>{{date}}</view>
					</picker>
				</view>
				<view @tap="examAdd" class="lastbutton">
					确定
				</view>
			</view>
		</open-alert>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg,
		ZC
	} = require("@/utils/common.js")
	const app = getApp();
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				is_show: false,
				navIndex: 0,
				test_title: '',
				course_teacher: [],
				test_list: [],
				user_info: {},
				class_id:"",
				course_teacher_info:{},
				course_teacher_id:0
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(e) {
			appLogin((user_info) => {
				this.user_info = user_info
				this.course_teacher_info = getApp().globalData.course_teacher_info
				this.class_id = getApp().globalData.class_id;
				// this.course_teacher_id =	this.course_teacher_info.course_teacher_id;
				this.course_teacher_id = app.globalData.target_info?app.globalData.target_info.course_teacher_id:''
				this.getTestList();
				// if(this.class_id){
				// 	httpGet({
				// 		url: 'users/class/info',
				// 		data:{
				// 			class_id:this.class_id,
				// 		},
				// 	}).then((res) => {
				// 		console.log(res);
				// 		this.course_teacher = res.result.course_teacher.list
				// 		httpGet({
				// 			url: 'users/exam/teacher_list',
				// 			data: {
				// 				course_teacher_id: this.course_teacher_info.course_teacher_id
				// 			},
				// 		}).then((res) => {			
				// 			this.test_list = res.result.list
				// 		})
				// 	})
				// }else{
				// 	this.get_class_info()
				// }
				/* this.get_class_info() */
			})
		},
		methods: {
			get_class_info(){
				httpGet({
					url: 'users/class/info',
					data:{
						class_id:this.class_id,
					},
				}).then((res) => {
					this.course_teacher = res.result.course_teacher.list
					this.subjectChange(0)
					// httpGet({
					// 	url: 'users/exam/course_teacher_list',
					// 	data: {
					// 		course_teacher_id: this.course_teacher_info.course_teacher_id
					// 	},
					// }).then((res) => {	
					// 	this.test_list = res.result.list
					// })
				})
			},
			// 用户点击事件设置navIndex达到切效果
			/* subjectChange(index) {
				this.navIndex = index
				httpGet({
					url: 'users/exam/teacher_list',
					data: {
						course_teacher_id: this.course_teacher[index].course_teacher_id
					},
				}).then((res) => {
					this.test_list = res.result.list
				})
			}, */
			nav_to(index) {
				uni.navigateTo({
					url: '../exam_input/school_grades?exam_id=' + this.test_list[index].exam_id
				})
			},
			create_test() {
				this.$refs.show_create_test.Show()

			},
			examAdd() {
				if (this.test_title == '') {
					uni.showToast({
						title: '请输入考试标题',
						icon: 'none'
					})
					return
				}
				httpPost({
					url: 'users/exam/create',
					data: {
						title: this.test_title,
						exam_time: this.date,
						course_teacher_id:this.course_teacher_id,
					},

				}).then((res) => {
					this.$refs.show_create_test.Close()
					uni.showToast({
						title: '考试创建成功',
						icon: 'none'
					})
					this.is_show = false
					this.getTestList();
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date);
			},
			show(){
				this.showmodel = 1;
			},
			hide(){
				this.showmodel = 0;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			getTestList(){
				httpGet({
					url: 'users/exam/course_teacher_list',
					data:{
						course_teacher_id:this.course_teacher_id,
					},
				}).then((res) => {
					this.test_list = res.result.list;
					console.log(res);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: white;
	}

	.box {}

	.top {
		display: flex;
		flex-wrap: wrap;
		margin-top: 34rpx;
		margin-bottom: 7rpx;
		/* border: #0000FF solid 1rpx; */
		border-bottom: #f6f6f6 solid 20rpx;
	}

	.subject_click {
		margin-right: 15rpx;
		margin-left: 30rpx;
		width: 190rpx;
		height: 60rpx;
		background-color: #4791fe;
		border-radius: 50rpx;
		color: #ddfdff;
		font-size: 27rpx;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 24rpx;
	}

	.subject {
		margin-right: 15rpx;
		margin-left: 30rpx;
		width: 200rpx;
		height: 60rpx;
		background-color: #f6f6f6;
		border-radius: 50rpx;
		color: #989898;
		font-size: 27rpx;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 24rpx;
	}

	/* 用于区别选中科目样式 */
	.subject.active {
		background-color: #4791fe;
		color: #fff;
	}

	.middle {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: #f6f6f6 solid 5rpx;
		padding: 20rpx;
		image {
			height: 20rpx;
			width: 20rpx;
		
		}

	}

	.info {
		display: flex;
		flex-direction: column;
	}



		

	.subject_picture {
		// margin-top: 33rpx;
	}

	.subject_lst {
		// margin-top: 40rpx;
		margin-left: 33rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
		white-space: nowrap;
	}

	.time {
		margin-left: 33rpx;
		font-size: 20rpx;
		color: #a3a3a3;
	}

	.inf_right {
		width: 16rpx;
		height: 18rpx;
		display: flex;
		float: right;
		color: #b2b2b2;
	}

	.bottom {
		height: 200rpx;
		width: 750rpx;
		// background-color: #f6f6f6;
		// border: #f6f6f6 solid 1rpx;
		position: fixed;
		bottom: 10rpx;
	}

	.bottom_content {
		margin-left: 75rpx;
		margin-top: 65rpx;
		width: 605rpx;
		height: 80rpx;
		background-color: #2e84ff;
		color: #f4fffc;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;

	}

	.exam-model {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
	}

	.openexam {
		padding-top: 20rpx;
		height: 565rpx;
		// position: absolute;
		bottom: 0;
		width: 100vw;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.examtile {
		text-align: center;
		margin-top: 40rpx;
	}

	.textone {
		color: #398aff;
		font-size: 30rpx;
	}

	.texttwo {
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.inputtext {
		margin-left: 100rpx;
		margin-right: 100rpx;
		margin-top: 75rpx;
		border-style: solid;
		border-width: 1px;
		height: 75rpx;
		border-radius: 15rpx;
		border-color: #e5e5e5;
		text-align: center;
	}

	.datepick {
		margin-left: 100rpx;
		margin-right: 100rpx;
		margin-top: 20rpx;
		border-radius: 15rpx;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 1px;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx;
	}

	.lastbutton {
		margin-left: 270rpx;
		margin-right: 270rpx;
		margin-top: 35rpx;
		background-color: #4892ff;
		height: 70rpx;
		border-radius: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 70rpx;
	}
</style>
